import 'package:flutter/cupertino.dart';
import 'package:mobile_app.core/core/presentation/helpers/screen_util_mixin.dart';
import 'package:mobile_app.core/core/presentation/theme/theme.dart';
import 'package:mobile_app.home.core/core/presentation/theme/home_core_theme.dart';

class BaseKeyboardTextField extends StatelessWidget with ScreenUtilMixin {
  const BaseKeyboardTextField({
    this.textColor,
    this.placeholderColor,
    this.placeholder,
    this.color,
    this.controller,
    this.focusNode,
    this.onSubmitted,
    this.textInputAction,
    this.autocorrect = true,
    this.enableSuggestions = true,
    this.enableInteractiveSelection = true,
    this.showCursor = true,
    this.keyboardType = TextInputType.text,
    super.key,
  });

  final Color? textColor;
  final Color? placeholderColor;
  final String? placeholder;
  final Color? color;
  final TextEditingController? controller;
  final FocusNode? focusNode;
  final VoidCallback? onSubmitted;
  final TextInputAction? textInputAction;
  final bool autocorrect;
  final bool enableSuggestions;
  final bool enableInteractiveSelection;
  final bool showCursor;
  final TextInputType keyboardType;

  @override
  Widget build(BuildContext context) {
    var textStyle = HomeCoreTheme.of(context).textTheme.keyboardTextField;

    if (textColor != null) {
      textStyle = textStyle.copyWith(
        color: textColor,
      );
    }

    var placeholderStyle = textStyle;

    if (placeholderColor != null) {
      placeholderStyle = placeholderStyle.copyWith(
        color: placeholderColor,
      );
    }

    return CupertinoTextField(
      controller: controller,
      focusNode: focusNode,
      textAlign: TextAlign.center,
      style: textStyle,
      autofocus: false,
      autocorrect: autocorrect,
      enableSuggestions: enableSuggestions,
      enableInteractiveSelection: enableInteractiveSelection,
      keyboardType: keyboardType,
      textInputAction: textInputAction,
      keyboardAppearance: CoreTheme.of(context).brightness,
      cursorColor: CoreTheme.of(context).primaryColor,
      showCursor: showCursor,
      padding: const EdgeInsets.symmetric(
        horizontal: 16,
        vertical: 12,
      ),
      // TODO: [Impeller] enable magnifier when it gets fixed
      magnifierConfiguration: TextMagnifierConfiguration.disabled,
      placeholder: placeholder,
      placeholderStyle: placeholderStyle,
      decoration: BoxDecoration(
        color: color,
      ),
      onSubmitted: (_) {
        onSubmitted?.call();
      },
      autofillHints: null,
    );
  }
}
